<template>
    <div id="show">
        <div class="row" v-for="(item,index) in datalist">
            <mt-switch v-model="value[index]"></mt-switch>
            <img :src="item.thumb_path" alt="">
            <div class="car_des">
                <h5>{{item.title}}</h5>
                <span>&yen;{{item.sell_price}}</span>
                <carInputNumber style="display: inline-block" :initCount="item.cou" :goodsid="item.id" v-on:cardataObj="getInputNumber"></carInputNumber>
                <a href="javascript:;" @click="delRow(item.id,index)">删除</a>
            </div>
        </div>
        <!--结算-->
        <div class="account">
            <h6>总计(不含运费)</h6>
            <span>已勾选商品{{totalCount}}件，总价&yen;{{totalAmount}}元</span>
            <mt-button type="danger" size="small">去结算</mt-button>
        </div>
    </div>
</template>

<script>

    //导入写在localStorage中的方法
    import  {getGoodsObj,updateData,removeItem} from '../../kits/localStorage';
    import kit from '../../kits/apikit';
    import {Toast} from 'mint-ui';
    import carInputNumber from '../subcom/carInputNumber.vue';
    export default{
        components:{
            carInputNumber
        },
        //实时计算商品总件数
        computed:{
            totalCount(){
                //计算出this.value数组中的true值的个数
                var trueArr = this.value.filter(function (item) {
                    return item;
                });
                //计算当前选中的商品的总价格
                //当前商品的购买数量*单价 这两个值从this.datalist中获取
                var amount = 0;
                //遍历value 即开关开的个数
                //forEach 遍历 调用数组的每个元素，并将元素传递给回调函数
                // 第一个参数:当前元素 第二个参数：当前元素的索引值(可选)  第三个参数：可选。当前元素所属的数组对象
                this.value.forEach((item,index)=>{
                    //item == true 计算价格
                    if(item){
                        var count = this.datalist[index].cou;
                        var price = this.datalist[index].sell_price;
                        var itemamount = count * price;
                        amount += itemamount;
                        console.log(this.datalist[index]);
                    }
                });
                this.totalAmount = amount;
                return trueArr.length;
            }
        },
        data(){
            return{
                //有两个开关，为了区分，把它们的状态通过索引存储在数组中
                //开关状态
                value:[],
                //商品数据
                datalist:[],
                //总价格
                totalAmount:0
            }
        },
        created(){
            this.getDataList();
        },
        methods:{
            //删除数据
            delRow(goodsid,index){
                //将this.value数组中的index这个位置的值移除 移除后自动触发计算属性totalCount的执行

                this.value.splice(index,1);
                //将this.datalist中index这个位置的值移除 自动触发totalCount的执行  在界面上消失
                this.datalist.splice(index,1);
                //把localStroage中的goodsid对应的所有值移除
                console.log(goodsid);
                removeItem(goodsid);

            },
            //获取数量组件中返回的值并更新到本地存储中
            getInputNumber(res){
                //调用更新的方法
                updateData(res);
                //更新this.datalist中的当前数量
                for (var i = 0; i < this.datalist.length; i++) {
                    if(this.datalist[i].id == res.goodsid) {
                        if (res.type == 'add') {
                            this.datalist[i].cou = this.datalist[i].cou + 1;
                        } else {
                            this.datalist[i].cou = this.datalist[i].cou - 1;
                        }
                    }
                    break;
                }
            },
            getDataList(){
                //从本地存储中获取所有商品的id值
                var obj = getGoodsObj();
                //将id值按api的参数格式提交给api {dfsdf:5,ewref:1}
                var idString = '';
                for(var key in obj){
                    //使用,拼接
                    idString+=key+','
                }
                //去掉最后一个参数后的逗号 substring 截取字符串
                idString = idString.substring(0,idString.length-1);
                //显示本地数据中的商品
                var url = 'http://wxtest.centaline.com.cn/api/api?type=getshopcarlist&ids='+idString;
                this.$http.get(url).then(function (response) {
                    if(response.body.status!=0){
                        Toast(response.body.message);
                        return;
                    }
                    this.datalist = response.body.message;
                    //把本地缓存中的所有商品对应的count值赋给message中每个对象的cou
                    //obj[item.id]通过中括号语法获取对象的id对应的cou值
                    response.body.message.forEach((item)=>{
                        item.cou = obj[item.id];
                    //初始化values数组全部为false  避免Bug
                    this.value.push(false);
                });
                    this.datalist = response.body.message;
                })

            }
        }
    }
</script>
<style scoped>

    .row{
        border-bottom: 1px solid #ccc;
        height: 102px;
        padding: 5px;
        display: flex;
    }
    .row img{
        width: 79px;
        height: 79px;
        margin-left: 10px;
        flex: 0 79px;
    }
    .car_des{
        flex:1;
        margin-left: 15px;
    }
    .car_des h5{
        color: #007aff;
        margin-bottom: 25px;
    }
    .car_des span{
        color: #FF3B30;
        font-size: 16px;
    }
    .car_des a{
        font-size: 16px;
        float: right;
        height: 40px;
        line-height: 40px;
    }
    .account{
        background-color: #e0e0e0;
        padding: 10px ;
        margin-top: 10px;
    }
    .account h6{
        font-size: 15px;
        color: black;
        margin-bottom: 10px;
    }

    .account .mint-button--small{
        float: right;
        margin-top: -20px;
    }
</style>